<template>
	<view class="container">
		<view class="body" v-if="flg=='0'">
			<view class="demo">
				<text>姓名</text>
				<view class="demo-right">
					<input v-model="formData.placeOrderName" type="text" placeholder="请输入姓名" />
					<view class="shadow-icon" style="opacity: 0;">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="demo">
				<text>电话</text>
				<view class="demo-right">
					<input v-model="formData.placePhone" type="text" placeholder="请输入电话" />
					<uni-icons type="right" style="opacity: 0;"></uni-icons>
				</view>
			</view>
			<view class="demo">

				<text>省市区</text>
				<view class="gui-flex" style="margin-right: 40rpx;">
					<view class="demo-right">
						<text class="gui-block gui-text gui-primary-text" @tap="open2"
							style="color: #666666;font-size: 24rpx;">{{formData.value2}}</text>
					</view>
					<text class="gui-icons gui-form-icon gui-color-gray gui-text-right" @tap="open2">&#xe603;</text>
				</view>


			</view>
			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="formData.value2"></gui-area-picker>


			<view class="demo">
				<text>详细地址</text>
				<view class="demo-right" style="margin-right:60rpx ;">
					<input v-model="formData.endAddress" type="text" placeholder="请输入详细地址" />
				</view>
			</view>

		</view>

		<view class="body" v-if="flg=='1'">
			<view class="demo">
				<text>姓名</text>
				<view class="demo-right">
					<input v-model="formData1.sendingOrderName" type="text" placeholder="请输入姓名" />
					<view class="shadow-icon" style="opacity: 0;">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="demo">
				<text>电话</text>
				<view class="demo-right">
					<input v-model="formData1.sendingPhone" type="text" placeholder="请输入电话" />
					<uni-icons type="right" style="opacity: 0;"></uni-icons>
				</view>
			</view>
			<view class="demo">

				<text>省市区</text>
				<view class="gui-flex" style="margin-right: 40rpx;">
					<view class="demo-right">
						<text class="gui-block gui-text gui-primary-text" @tap="open2"
							style="color: #666666;font-size: 24rpx;">{{formData1.value2}}</text>
					</view>
					<text class="gui-icons gui-form-icon gui-color-gray gui-text-right" @tap="open2">&#xe603;</text>
				</view>


			</view>
			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="formData1.value2"></gui-area-picker>


			<view class="demo">
				<text>详细地址</text>
				<view class="demo-right" style="margin-right:60rpx ;">
					<input v-model="formData1.startAddress" type="text" placeholder="请输入详细地址" />
				</view>
			</view>

		</view>



		<!-- 新增地址 -->
		<view class="body" v-if="address=='add'">
			<view class="demo">
				<text>姓名</text>
				<view class="demo-right">
					<input v-model="addForm.userName" type="text" placeholder="请输入姓名" />
					<view class="shadow-icon" style="opacity: 0;">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
			<view class="demo">
				<text>电话</text>
				<view class="demo-right">
					<input v-model="addForm.userPhone" type="text" placeholder="请输入电话" />
					<uni-icons type="right" style="opacity: 0;"></uni-icons>
				</view>
			</view>
			<view class="demo">

				<text>省市区</text>
				<view class="gui-flex" style="margin-right: 40rpx;">
					<view class="demo-right">
						<text class="gui-block gui-text gui-primary-text" @tap="open2"
							style="color: #666666;font-size: 24rpx;">{{value2}}</text>
					</view>
					<text class="gui-icons gui-form-icon gui-color-gray gui-text-right" @tap="open2">&#xe603;</text>
				</view>


			</view>
			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="value2"></gui-area-picker>


			<view class="demo">
				<text>详细地址</text>
				<view class="demo-right" style="margin-right:60rpx ;">
					<input v-model="addForm.address" type="text" placeholder="请输入详细地址" />
				</view>
			</view>

		</view>





		<view class="tip">
			<image v-if="isSelect" @click="baocun" src="/static/images/sel.png" mode=""></image>
			<image v-else src="/static/images/sel_1.png" mode=""></image>
			保存到地址簿
		</view>



		<view v-if="flg=='0'||flg=='1'" @click="saveAddress" class="save-address">
			确认
		</view>

		<view v-if="address=='add'" @click="submitInfo" class="save-address">
			保存地址
		</view>
	</view>




</template>

<script>
	export default {
		data() {
			return {
				// 第2个级联的默认值
				isSelect: true, //保存到地址
				flg: '',
				address: '',
				value2: '请选择',
				formData: {
					endAddress: '',
					value2: '请选择',
					placeOrderName: '',
					placePhone: ''
				},
				formData1: {
					startAddress: '',
					value2: '请选择',
					sendingOrderName: '',
					sendingPhone: ''
				},
				addForm: {
					address: '',
					userName: '',
					userPhone: '',
				}
			};
		},
		onLoad(e) {
			this.flg = e.flg
			this.address = e.address
			console.log(this.flg, this.address);
		},
		methods: {
			// 第2个组件相关
			open2: function() {
				this.$refs.graceAddressPicker2.open();
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				if (this.flg == 0) {
					this.formData.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
					console.log(this.formData.value2);
				} else if (this.flg == 1) {
					this.formData1.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				}
				if (this.address == 'add') {
					this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				}


			},
			// 保存地址后存储信息到storange然后返回
			saveAddress() {
				if (this.flg == 0) {
					this.formData.value2 = this.formData.value2.replace(/,/g, "")
					let sendInfo={
						placeOrderName:this.formData.placeOrderName,
						placePhone:this.formData.placePhone,
						address: this.formData.value2 + this.formData.endAddress
					}
					uni.setStorageSync('sendInfo', sendInfo)
					console.log('覆盖了');
				} else {
					uni.setStorageSync('reciveInfo', this.formData1)
				}
				uni.navigateBack()

			},
			submitInfo() {
				this.addForm.address = this.value2.replace(/,/g, "") + this.addForm.address
				let self = this
				uni.gRequest.post('address/addAddress', JSON.stringify(self.addForm)).then(res=>{
					self.reset()
					uni.navigateBack()
					
				})
			},
			// 保存到地址簿
			baocun(){
				this.isSelect=!this.isSelect
				if(this.flg==0){
					this.addForm.address=this.formData.value2.replace(/,/g, "") + this.formData.endAddress
					this.addForm.userName=this.formData.placeOrderName
					this.addForm.userPhone=this.formData.placePhone
				}
				if(this.flg==1){
					this.addForm.address=this.formData1.value2.replace(/,/g, "") + this.formData1.startAddress
					this.addForm.userName=this.formData1.sendingOrderName
					this.addForm.userPhone=this.formData1.sendingPhone
				}
				let self = this
				uni.gRequest.post('address/addAddress', JSON.stringify(self.addForm)).then(res=>{
					self.reset()
				})
				
			},
			// 重置表单
			reset(){
				this.addForm.address=''
				this.addForm.userName=''
				this.addForm.userPhone=''
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.container {
		height: 100%;
		padding: 20rpx;
	}

	.body {
		padding: 0 20rpx;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(182, 182, 182, 0.15);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.demo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #666666;
		border-bottom: 1rpx #eee solid;

		&:last-child {
			border-bottom: none;
		}

		.demo-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.uni-icons {
				margin-left: 30rpx;
				font-size: 30rpx !important;
			}
		}
	}

	.save-address {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, #347DFD 0%, #4EA0FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		padding: 20rpx 0;
		margin: 100rpx 50rpx 0;
		color: white;
	}

	.tip {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		margin-top: 30rpx;
		padding-left: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
</style>